<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>商品详情</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/all.css" />
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/jquery.touchSlider.js"></script>
    <script src="js/self.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
//            图片滑动
            $dragBln = false;
            $(".main_image_detail").touchSlider({
                flexible : true,
                speed : 200,
                btn_prev : $("#btn_prev"),
                btn_next : $("#btn_next"),
                paging : $(".flicking_con a"),
                counter : function (e){
                    $(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
                }
            });

            $(".main_image_detail").bind("mousedown", function() {
                $dragBln = false;
            });

            $(".main_image_detail").bind("dragstart", function() {
                $dragBln = true;
            });

            $(".main_image_detail a").click(function(){
                if($dragBln) {
                    return false;
                }
            });
            $(".main_visual_detail").hover(function(){
//                clearInterval(timer);
            },function(){
                timer = setInterval(function(){
                    $("#btn_next").click();
                },5000);
            });

            $(".main_image_detail").bind("touchstart",function(){
                clearInterval(timer);
            }).bind("touchend", function(){
                timer = setInterval(function(){
                    $("#btn_next").click();
                }, 5000);
            });

            //            进度条
            $(".bar_span").each(function () {
                var ress = $(this).attr('width');
                var len=ress+"%";
                console.log(len);
                $(this).animate({
                    width:len
                });

            })
        });
    </script>
</head>
<body  ontouchstart="">
<div class="detailTop pf w100 of">
     <div class="w100 of tc c3 f18">
         <span class="pa" style="left: 10px;font-size: 30px;color: #444444;" onclick="javascript:history.back();">&laquo;</span>
         商品详情
         <div class="dib of pa" style="right: 10px;">
             <a href="riskWarning.html" class="dib tc">风险提示</a>
         </div>
     </div>
</div>

<div class="container jz">
        <div class="main_visual_detail">
            <div class="flicking_con">
                <a href="#">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
            </div>
            <div class="main_image_detail">
                <ul>
                    <li><span class="img_4"></span></li>
                    <li><span class="img_3"></span></li>
                    <li><span class="img_1"></span></li>
                    <li><span class="img_2"></span></li>
                    <li><span class="img_5"></span></li>
                </ul>
                <!--<a href="javascript:;" id="btn_prev"></a>-->
                <!--<a href="javascript:;" id="btn_next"></a>-->
            </div>
        </div>
        <!--main_visual_detail-->
        <section class="proSection pr w100 bcf" style="padding-top: 13px;padding-bottom: 3px;">
            <a class="proName db of clearfix">
                <span class="fl">项目名称...</span>
            </a>
            <a class="proMoney db of clearfix">
                <div class="dib fl c9 f12" style="margin-top:3px">已筹</div><span class="fl"><i class="f10" style="color: #ff0000">￥</i>296.00</span>
            </a>
            <a class="progress db"><div class="bar_span" width="68"></div></a>
            <a class="proDetail db of clearfix">
                <div class="fl tl" style="width: 50%">
                    <div class="of clearfix">
                        <span class="db f14 c9 fl">支持者&nbsp;</span>
                        <i class="db f16 c3 fl">369</i>
                    </div>
                </div>
                <div class="fl tr" style="width: 50%">
                   <div class="of clearfix">
                       <i class="db f16 c3 fr">68 %</i>
                       <span class="db f14 c9 fr">当前进度&nbsp;</span>
                   </div>
                </div>
            </a>
        </section>
        <section class="proSection pr w100 bcf">
           <p class="detailInfo c9 f12 jz">
               此项目计划在<i class="cred">&nbsp;2016年09月25号&nbsp;</i>前得到 <i class="cred">&nbsp;177999990元&nbsp;</i> 的支持！剩余<i class="cred">19天</i>!您将以众筹专享价获得相应支持的实物
           </p>
        </section>
        <section class="proSection pr w100 bcf">
          <div class="detailCompany w100">
              <h4 class="f18 c3 jz">项目发起人</h4>
              <div class="of clearfix jz">
                <img src="images/companyIcon.png" class="dib fl">
                <div class="fl dib">
                    <h5 class="c3 f14">深圳市朱丽树萌保险品销售有限公司</h5>
                    <p class="c9 f12" style="margin-top: 3px;">深圳市南山区中华南路885号科技大厦21-584</p>
                </div>
              </div>
          </div>
        </section>

        <div id="introDetail" class="w100 of bcf">
            <div>
                <ul class="introTab">
                    <li class="introtab_current"><span>产品</span></li>
                    <li><span>话题<i class="c6 f12">(1205)</i></span><div class="tabLineLeft"></div><div class="tabLineRight"></div></li>
                    <li><span>支持者<i class="c6 f12">(52025)</i></span></li>
                </ul>
            </div>
            <div class="introtab_content">
                <article  style="display:block;">
                    <img src="images/proDetailImg.jpg" class="w100 hauto" style="margin-bottom: 7px;">
                    <img src="images/proDetailImg.jpg" class="w100 hauto" style="margin-bottom: 7px;">
                </article><!--产品-->
                <article>
                    <div class="speakText w100 of">
                        <textarea class="db" rows="1" placeholder="填写评论..." id="speakTextarea"></textarea>
                        <div class="clearfix of">
                            <input type="button" value="发表" class="db fr"/>
                        </div>
                    </div>
                    <script>
                        $(function () {
                            $("#speakTextarea").focus(function () {
                                $("html,body").animate({scrollTop:$(".introtab_content").offset().top},700);
                                $(".detailBottm").hide();
                                $(".detailTop").hide();
                            });
                            $("#speakTextarea").blur(function () {
                                $(".detailBottm").show();
                                $(".detailTop").show();
                            });
                        })
                    </script>
                    <div class="newSpeakAfter"></div>
                    <div class="speakContainer of">
                        <div class="speakBlock of">
                            <h5 class="f12 c6">路人甲张三疯</h5>
                            <h5 class="f12 cc lh2">昨天21:39</h5>
                            <P class="c3 f14 lh18">如果你无法简洁的表达你的想法，那只说明你还不够了解它。</P>
                        </div>
                        <section class="replyBlock of">
                            <h5 class="f12 cred">路人甲张三疯</h5>
                            <h5 class="f12 cc lh2">昨天21:39</h5>
                            <P class="c3 f14 lh15 t2">
                                非常感谢您对乐祥的支持和信任！把您最真实的感受告诉每位
                                消费者。您的满意是我们前进的动力，有您的支持，我们一定会越
                                做越好，不断改进，争取各方面服务到位。让每一位顾客无后顾之
                                忧。乐祥祝您生活愉快，欢迎您下次再来哦！
                            </P>
                        </section>
                    </div>
                    <div class="speakContainer of">
                        <div class="speakBlock of">
                            <h5 class="f12 c6">路人甲张三疯</h5>
                            <h5 class="f12 cc lh2">昨天21:39</h5>
                            <P class="c3 f14 lh15">如果你无法简洁的表达你的想法，那只说明你还不够了解它。</P>
                        </div>
                    </div>
                    <div class="speakContainer of">
                        <div class="speakBlock of">
                            <h5 class="f12 c6">路人甲张三疯</h5>
                            <h5 class="f12 cc lh2">昨天21:39</h5>
                            <P class="c3 f14 lh15">如果你无法简洁的表达你的想法，那只说明你还不够了解它。</P>
                        </div>
                    </div>


                </article><!--话题-->
                <article>
                    <div class="supporterContainer">
                        <div class="clearfix of w100">
                          <section class="fl">
                              <div class="of clearfix">
                                <img src="images/touxiang.png" class="fl db">
                                <div class="fl" style="width: 68%;margin-left: 1%">
                                    <h4 class="f14 c6">139****6789</h4>
                                    <p><span class="f12 c9 fl">支持&nbsp;</span><i class="cff9933 fl">￥</i><span class="f16 cff9933 fl">799.00</span></p>
                                </div>
                              </div>
                          </section>
                            <section class="fr">
                                <div class="of clearfix">
                                    <img src="images/touxiang.png" class="fl db">
                                    <div class="fl" style="width: 68%;margin-left: 1%">
                                        <h4 class="f14 c6">139****6789</h4>
                                        <p><span class="f12 c9 fl">支持&nbsp;</span><i class="cff9933 fl">￥</i><span class="f16 cff9933 fl">799.00</span></p>
                                    </div>
                                </div>
                            </section>
                        </div>
                        <div class="clearfix of w100">
                          <section class="fl">
                              <div class="of clearfix">
                                <img src="images/touxiang.png" class="fl db">
                                <div class="fl" style="width: 68%;margin-left: 1%">
                                    <h4 class="f14 c6">139****6789</h4>
                                    <p><span class="f12 c9 fl">支持&nbsp;</span><i class="cff9933 fl">￥</i><span class="f16 cff9933 fl">799.00</span></p>
                                </div>
                              </div>
                          </section>
                            <section class="fr">
                                <div class="of clearfix">
                                    <img src="images/touxiang.png" class="fl db">
                                    <div class="fl" style="width: 68%;margin-left: 1%">
                                        <h4 class="f14 c6">139****6789</h4>
                                        <p><span class="f12 c9 fl">支持&nbsp;</span><i class="cff9933 fl">￥</i><span class="f16 cff9933 fl">799.00</span></p>
                                    </div>
                                </div>
                            </section>
                        </div>
                        <div class="clearfix of w100">
                            <section class="fl">
                                <div class="of clearfix">
                                    <img src="images/touxiang.png" class="fl db">
                                    <div class="fl" style="width: 68%;margin-left: 1%">
                                        <h4 class="f14 c6">139****6789</h4>
                                        <p><span class="f12 c9 fl">支持&nbsp;</span><i class="cff9933 fl">￥</i><span class="f16 cff9933 fl">799.00</span></p>
                                    </div>
                                </div>
                            </section>
                            <section class="fr">
                                <div class="of clearfix">
                                    <img src="images/touxiang.png" class="fl db">
                                    <div class="fl" style="width: 68%;margin-left: 1%">
                                        <h4 class="f14 c6">139****6789</h4>
                                        <p><span class="f12 c9 fl">支持&nbsp;</span><i class="cff9933 fl">￥</i><span class="f16 cff9933 fl">799.00</span></p>
                                    </div>
                                </div>
                            </section>
                        </div>
                        <div class="clearfix of w100">
                            <section class="fl">
                                <div class="of clearfix">
                                    <img src="images/touxiang.png" class="fl db">
                                    <div class="fl" style="width: 68%;margin-left: 1%">
                                        <h4 class="f14 c6">139****6789</h4>
                                        <p><span class="f12 c9 fl">支持&nbsp;</span><i class="cff9933 fl">￥</i><span class="f16 cff9933 fl">799.00</span></p>
                                    </div>
                                </div>
                            </section>
                            <section class="fr">
                                <div class="of clearfix">
                                    <img src="images/touxiang.png" class="fl db">
                                    <div class="fl" style="width: 68%;margin-left: 1%">
                                        <h4 class="f14 c6">139****6789</h4>
                                        <p><span class="f12 c9 fl">支持&nbsp;</span><i class="cff9933 fl">￥</i><span class="f16 cff9933 fl">799.00</span></p>
                                    </div>
                                </div>
                            </section>
                        </div>
                        <div class="clearfix of w100">
                            <section class="fl">
                                <div class="of clearfix">
                                    <img src="images/touxiang.png" class="fl db">
                                    <div class="fl" style="width: 68%;margin-left: 1%">
                                        <h4 class="f14 c6">139****6789</h4>
                                        <p><span class="f12 c9 fl">支持&nbsp;</span><i class="cff9933 fl">￥</i><span class="f16 cff9933 fl">799.00</span></p>
                                    </div>
                                </div>
                            </section>
                            <section class="fr">
                                <div class="of clearfix">
                                    <img src="images/touxiang.png" class="fl db">
                                    <div class="fl" style="width: 68%;margin-left: 1%">
                                        <h4 class="f14 c6">139****6789</h4>
                                        <p><span class="f12 c9 fl">支持&nbsp;</span><i class="cff9933 fl">￥</i><span class="f16 cff9933 fl">799.00</span></p>
                                    </div>
                                </div>
                            </section>
                        </div>
                        <div class="clearfix of w100">
                            <section class="fl">
                                <div class="of clearfix">
                                    <img src="images/touxiang.png" class="fl db">
                                    <div class="fl" style="width: 68%;margin-left: 1%">
                                        <h4 class="f14 c6">139****6789</h4>
                                        <p><span class="f12 c9 fl">支持&nbsp;</span><i class="cff9933 fl">￥</i><span class="f16 cff9933 fl">799.00</span></p>
                                    </div>
                                </div>
                            </section>
                            <section class="fr">
                                <div class="of clearfix">
                                    <img src="images/touxiang.png" class="fl db">
                                    <div class="fl" style="width: 68%;margin-left: 1%">
                                        <h4 class="f14 c6">139****6789</h4>
                                        <p><span class="f12 c9 fl">支持&nbsp;</span><i class="cff9933 fl">￥</i><span class="f16 cff9933 fl">799.00</span></p>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </article><!--支持者-->
            </div>
        </div>
        <script>
//            tab切换
            $(function () {
                $('.introTab>li').mouseover(function () {
                    var $t = $(this).index();
                    $('.introTab>li').removeClass();
                    $(this).addClass('introtab_current');
                    $('.introtab_content>article').css('display', 'none');
                    $('.introtab_content>article').eq($t).css('display', 'block');
                })
            })
        </script>

    </div>

<div class="detailBottm pf w100 of">
   <a href="support.html" class="db w100 f18 cf f18 tc">支&nbsp;持</a>
</div>
</body>
</html>
</html>
</html>
</html>